<form class="form-horizontal" name="executeJobForm">
  <!-- image-input -->
  <div class="form-group">
    <label for="job_image" class="col-sm-1 control-label text-left">Image</label>
    <div class="col-sm-11">
      <input type="text" class="form-control" ng-model="$ctrl.formValues.Image" id="job_image" name="job_image" placeholder="e.g. ubuntu:latest" required auto-focus>
    </div>
  </div>
  <div class="form-group" ng-show="executeJobForm.job_image.$invalid">
    <div class="col-sm-12 small text-warning">
      <div ng-messages="executeJobForm.job_image.$error">
        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
      </div>
    </div>
  </div>
  <!-- !image-input -->
  <div class="form-group">
    <span class="col-sm-12 text-muted small">
      This job will run inside a privileged container on the host. You can access the host filesystem under the
      <code>/host</code> folder.
    </span>
  </div>
  <!-- execution-method -->
  <div class="col-sm-12 form-section-title">
    Job creation
  </div>
  <div class="form-group"></div>
  <div class="form-group" style="margin-bottom: 0">
    <div class="boxselector_wrapper">
      <div>
        <input type="radio" id="method_editor" ng-model="$ctrl.state.Method" value="editor">
        <label for="method_editor">
          <div class="boxselector_header">
            <i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px;"></i>
            Web editor
          </div>
          <p>Use our Web editor</p>
        </label>
      </div>
      <div>
        <input type="radio" id="method_upload" ng-model="$ctrl.state.Method" value="upload">
        <label for="method_upload">
          <div class="boxselector_header">
            <i class="fa fa-upload" aria-hidden="true" style="margin-right: 2px;"></i>
            Upload
          </div>
          <p>Upload from your computer</p>
        </label>
      </div>
    </div>
  </div>
  <!-- !execution-method -->
  <!-- web-editor -->
  <div ng-show="$ctrl.state.Method === 'editor'">
    <div class="col-sm-12 form-section-title">
      Web editor
    </div>
    <div class="form-group">
      <div class="col-sm-12">
        <code-editor
          identifier="execute-job-editor"
          placeholder="# Define or paste the content of your script file here"
          on-change="$ctrl.editorUpdate">
        </code-editor>
      </div>
    </div>
  </div>
  <!-- !web-editor -->
  <!-- upload -->
  <div ng-show="$ctrl.state.Method === 'upload'">
    <div class="col-sm-12 form-section-title">
      Upload
    </div>
    <div class="form-group">
      <span class="col-sm-12 text-muted small">
        You can upload a script file from your computer.
      </span>
    </div>
    <div class="form-group">
      <div class="col-sm-12">
        <button class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formValues.JobFile">Select file</button>
        <span style="margin-left: 5px;">
          {{ $ctrl.formValues.JobFile.name }}
          <i class="fa fa-times red-icon" ng-if="!$ctrl.formValues.JobFile" aria-hidden="true"></i>
        </span>
      </div>
    </div>
  </div>
  <!-- !upload -->
  <!-- actions -->
  <div class="col-sm-12 form-section-title">
    Actions
  </div>
  <div class="form-group">
    <div class="col-sm-12">
      <button type="button" class="btn btn-primary btn-sm"
        ng-disabled="$ctrl.state.actionInProgress || !executeJobForm.$valid
        || ($ctrl.state.Method === 'upload' && !$ctrl.formValues.JobFile)"
        ng-click="$ctrl.executeJob()"
        button-spinner="$ctrl.state.actionInProgress">
        <span ng-hide="$ctrl.state.actionInProgress">Execute</span>
        <span ng-show="$ctrl.state.actionInProgress">Starting job...</span>
      </button>
      <span class="text-danger" ng-if="$ctrl.state.formValidationError" style="margin-left: 5px;">
        {{ $ctrl.state.formValidationError }}
      </span>
    </div>
  </div>
<!-- !actions -->
</form>
